<template>
<div>
    <h3>{{imginfo.title}}</h3>
       <p class="subtitle">
           <span>发表时间：{{imginfo.addTime | dateFmt}}</span>
           <span>点击：{{imginfo.readNum}}次</span>
       </p>
      

       <div class="thumbs">
            <vue-preview :slides="imgs" @close="handleClose" height="100px"></vue-preview>         
        </div>
       <!-- 图片区域 -->
       <div class="content">
           {{imginfo.content}}
       </div>
</div>
  
</template>

<script>
export default {
    data(){
        return {
            id:this.$route.params.id,
            imginfo:{},
            imgs:[],
            imgdz:"http://localhost:3000/images/"

        }
    }
    ,
    methods:{
        //根据id查询详情
       getInfo(){
           this.$ajax({
               url:"/imginfo/"+this.id,
               method:"get"
           }).then(resp=>{
               this.imginfo = resp.data.message[0];

           });
       },
       handleClose(){
           console.log("handleClose方法。。。。");
       },
       //缩略图使用广告轮播
       getIms(){
             this.$ajax({
                 url:"/imgs",
                 method:"get"

             }).then(resp=>{
                 resp.data.message.forEach(item=>{
                    item.w = 600;
                    item.h = 400;//是图片放大的尺寸
                    item.msrc = this.imgdz+item.imgAddr;//小图
                    item.src = this.imgdz+item.imgAddr;//大图
                 });

                 this.imgs = resp.data.message;
             });
       }
       
    },
    created(){
        this.getInfo();
        this.getIms();
    }

}
</script>

<style scoped>
.content{
    font-size:13px;
    line-height: 30px;
}
.my-gallery{  
              display: flex;
              flex-wrap:wrap;
}
figure{
                 width:400px;
                 height:100px; 
                  margin: 5px; 
                  border:1px solid red;
}
/* .thumbs >>> img{
                      width: 300px;
                    height: 100%;
                      border-radius: 5px;
} */

.thumbs >>> img{
      width: 300px;
                    height: 100%;
                      border-radius: 5px;
}
</style>